<template>
	<view class="content">
		<view class="question" v-if="!formData.submit">
			<view class="question-box" v-if="show===index" v-for="(item,index) in questionList" :key="index">

				<view class="question-header">
					<view class="question-type" v-if="item.type===0">单选题</view>
					<view class="question-type" v-if="item.type===1">多选题</view>
					<view class="question-type" v-if="item.type===2">判断题</view>
					<view class="question-order">{{index+1}}/{{questionList.length}}</view>
				</view>
				<u-line color="grey"></u-line>
				<view class="question-body">
					<view class="question-title">
						{{item.title}}
					</view>

					<!-- 答案滚动 :style="{height: wh + 'px'}"-->
					<scroll-view scroll-y>
						<view :class="['question-option-item',questionList[index].option[index2].checked? 'active':'']"
							v-for="(item2,index2) in questionList[index].option" :key="index2"
							@click.native="confirmAnswer(index,index2)" v-if="(item2.value!='')&&item2.value!='null' ">
							{{item2.optionKey}}&nbsp; {{item2.value}}
						</view>
					</scroll-view>
				</view>

			</view>

			<view class="switchOrder">
				<view class="pre" @click.native="preQuestion">上一题</view>
				<view class="next" @click.native="nextQuestion">下一题</view>
				<view class="submit-answer" @click.native="submitAnswer">提交</view>
			</view>

			<!-- 做题统计 -->
			<view class="tabbar">
				<u-tabbar :value="value1" @change="click1" :fixed="true" activeColor="#d81e06" :placeholder="false"
					:safeAreaInsetBottom="false">
					<!-- <u-tabbar-item text="首页" icon="home" @click="click1" ></u-tabbar-item>
           	<u-tabbar-item text="放映厅" icon="photo" @click="watchAllQuestion" ></u-tabbar-item> -->
					<u-tabbar-item text="所有题目" icon="grid-fill" @click="watchAllQuestion"></u-tabbar-item>

					<!-- <u-tabbar-item text="收藏" icon="star-fill" @click="click1"></u-tabbar-item> -->
				</u-tabbar>
				<!-- <view class="question-count">
           	<view class="class-count-item">
           		<u-icon name="checkmark-circle" color="green" size="20"></u-icon>&nbsp;&nbsp;<view
           			style="color: green;">&nbsp;9</view>
           	</view>
           	<view class="class-count-item">
           		<u-icon name="close-circle" color="red" size="20"></u-icon>&nbsp;&nbsp;<view style="color: red;">&nbsp;9
           		</view>
           	</view>
           	<view class="class-count-item" @click.native="watchAllQuestion">
           		<u-icon name="grid-fill" color="grey" size="20"></u-icon>&nbsp;&nbsp;<view style="color: grey;">
           			&nbsp;{{show+1}}/{{questionList.length}}</view>
           	</view>
           	<view class="class-count-item-save" v-if="!questionList[show].collect" @click.native="collectQuestion">
           		<u-icon name="star-fill" color="grey" size="20"></u-icon>&nbsp;&nbsp;<view style="color: grey;">&nbsp;收藏
           		</view>
           	</view>
           	<view class="class-count-item-save" v-if="questionList[show].collect" @click.native="cancelCollect">
           		<u-icon name="star-fill" color="orange" size="20"></u-icon>&nbsp;&nbsp;<view style="color: grey;">
           			&nbsp;取消收藏</view>
           	</view>
           </view>
      -->
			</view>

		</view>
		<!-- 提交答案后 -->
		<view v-if="formData.submit">
			<m-bg></m-bg>
		</view>
		<view class="after-submit" v-if="formData.submit">
			<view class="result-show-title">{{formData.title}}-救援技能培训</view>
			<view class="submit-time">交卷时间：{{formData.finishedTime}}</view>
			<view class="line">
				<u-line dashed></u-line>
			</view>
			<view class="score-box1">
				<view class="score-title1">总分：</view>
				<view class="sorce-count">
					<view class="my-score">{{score}}</view>
					<view class="all-score">/100</view>
				</view>
			</view>
			<view class="question-count1">
				<view class="all-topic">
					<view class="topic-title">总题数</view>
					<view class="topic-count">{{questionList.length}}</view>
				</view>
				<view class="error-topic">
					<view class="topic-title">错题数</view>
					<view class="topic-count">{{errorNum}}</view>
				</view>
				<view class="right-topic">
					<view class="topic-title">正确数</view>
					<view class="topic-count">{{correctNum}}</view>
				</view>
			</view>

			<view class="operation">
				<view class="back" @click.native="learnAgain">返回</view>
				<view class="topic-detail" @click.native="watchDetail">查看详情</view>
			</view>
		</view>

		<!-- formData.submit -->
		<view class="submit-result" v-if="false">
			<image :src="bgImageSrc" style="width: 100%;"></image>
			<view class="answer-count">
				<view>总题数: {{questionList.length}}</view>
				<view>错题: {{errorNum}}</view>
				<view>正确: {{correctNum}}</view>
			</view>
			<view class="score-box">
				<view class="score-box-score">{{score}}分</view>
				<view v-if="score>=90">恭喜你，考核已通过<br>
					<image class="iamge-item" src="../../static/images/通过.png" style="width: 120rpx;height: 120rpx;">
					</image>
				</view>
				<view v-if="score<90">别灰心，继续努力<br>
					<image class="iamge-item" src="../../static/images/哭泣.png" style="width: 120rpx;height: 120rpx;">
					</image>
				</view>
			</view>
			<u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="true"
				:safeAreaInsetBottom="false">
				<!-- <u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item> -->
				<!-- <u-tabbar-item text="放映厅" icon="photo" badge="3"></u-tabbar-item> -->
				<u-tabbar-item text="重新练习" @click.native="learnAgain" icon="edit-pen"></u-tabbar-item>
				<u-tabbar-item text="查看解析" @click.native="watchDetail" icon="file-text"></u-tabbar-item>
				<u-tabbar-item text="返回" @click.native="goBack" icon="play-right"></u-tabbar-item>
			</u-tabbar>
		</view>
		<view>
			<u-popup :show="showAll" mode="top" @close="close" @open="open">
				<view class="all-question">
					<view v-for="(item,index) in questionList" :key="index" @click.native="toSpecialQuestion(index)"
						:class="['all-question-item',item.checked===true?'finished':'',show===index?'active':'']">
						{{index+1}}
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	export default {
		onLoad(option) {
			// console.log(11111111111111111111111)
			this.classId = option.id
			this.getQuestionList(option.id)
			// console.log(this.show===0 )
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight
		},
		data() {
			return {
				//分数
				submitScore: 0,
				//做题统计的tabbar
				value2: 1,
				// 当前课程的id
				classId: 0,
				// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
				value1: 0,
				isSubmit: false,
				wh: 0,
				show: 0,
				showAll: false,
				bgImageSrc: this.getimageBaseUrl("result.png"),
				// 问题集合
				formData: {
					submit: false,
					questionList: []
				},
				questionList: [],
				total: 20,
			};
		},

		beforeDestroy() {
			// console.log("退出l")
			this.formData.submit = false
			// console.log(this.questionList)
			// 返回之前需要将进度保存一下
			// console.log(this.questionList[0].answerArray)
			// console.log(this.questionList[0].option)

		},
		methods: {

			//视频看完和题目也完成的情况下，可以定义为这个小课程完成，需要改变状态
			async changeClassStatus(id) {
				const user = uni.getStorageSync("user")
				// console.log("类型changeStatus"+this.subjectId)
				//测试将16号的课程学习在缓存中更改为已完成
				uni.request({
					url: `${this.$baseUrl}/learning/changeStatus/${this.classId}/${user.openid}`,
					method: 'PUT',
					success: (res) => {
						// console.log(res)
					}
				})
			},
			async watchDetail() {
				// console.log("查看解析")
				this.formData.topicList = this.questionList

				// const json= JSON.stringify(this.formData)
				// console.log(json)
				uni.navigateTo({
					url: '/pages/topic-detail/topic-detail?item=' + encodeURIComponent(JSON.stringify(this
						.formData)),
				})
			},
			click1(e) {
				console.log('click1', e);
			},
			//重置做题的进度
			async learnAgain() {
				for (var i = 0; i < this.questionList.length; i++) {
					this.questionList[i].checked = false
					for (var j = 0; j < this.questionList[i].option.length; j++) {
						this.questionList[i].option[j].checked = false
					}
				}
				// this.isSubmit=false
				this.formData.submit = false
				this.show = 0

			},
			async goBack() { //返回的地方应该是观看视频的地方
				// this.isSubmit=false
				this.formData.submit = false
				// console.log(this.questionList)
				// 返回之前需要将进度保存一下
				// console.log(this.questionList[0].answerArray)
				// console.log(this.questionList[0].option)
				const user = uni.getStorageSync("user")
				// const json=JSON.stringify(this.questionList)
				this.formData.questionList = this.questionList
				uni.request({
					url: `${this.$baseUrl}/learning/saveProgress/${user.openid}/${this.classId}`,
					method: 'POST',
					data: {
						// topicList:this.formData
						topicList: this.questionList
					},
					success: (res) => {
						// console.log(res.data)
					}
				})
				if (this.score > 90) {
					this.changeClassStatus()
				}
				uni.navigateBack();
				// uni.navigateTo({
				//   url:'/pages/video/video?id='+this.classId
				// })
			},
			async getQuestionList(id) {
				// console.log("查询题库"+id)
				const user = uni.getStorageSync("user")
				console.log(user)
				uni.request({
					url: `${this.$baseUrl}/learning/setTopic/${id}/${user.openid}`,
					method: 'GET',
					success: (res) => {
						// console.log(res.data)
						// console.log(res.data.data.submit)
						this.formData = res.data.data
						this.questionList = this.formData.topicList
						// console.log(res.data.data)
						// this.isSubmit=res.data.isSubmit
					}
				})
			},
			//提交答案  
			async submitAnswer() {

				// console.log("提交答案了")
				for (var i = 0; i < this.questionList.length; i++) {
					if (this.questionList[i].checked === false) {
						return uni.showToast({
							title: '你还有题目未完成',
							icon: 'none',
							mask: true
						})
					} else {
						// console.log(this.questionList[i].answerArray.length)
						if (this.questionList[i].type === 1) {
							// console.log("第"+i+"多选")
							// console.log(this.questionList[i].option.length)
							var answerCount = 0;
							for (var j = 0; j < this.questionList[i].option.length; j++) {
								// console.log(this.questionList[i].option[j].checked)
								if (this.questionList[i].option[j].checked === true) {
									// console.log("第"+i+"多选了"+this.questionList[i].option[j].optionKey)
									answerCount++;
									// console.log(["A","B"].indexOf("A"))
									// console.log(this.questionList[i].answerArray.indexOf(this.questionList[i].option[j].optionKey))
									//判断答案是否在答案集合中
									if (this.questionList[i].answerArray.indexOf(this.questionList[i].option[j]
											.optionKey) == -1) {
										// console.log("选错了")
										this.questionList[i].correct = false
										// 选错了直接退出
										// this.errorNum++;
									}
									//全部选对了就判断数组长度是否正确
								}
								//这里判断答案长度和选择的长度
								// console.log(this.questionList[i].answerArray.length)
								// console.log("答案长度"+answerCount)        
								if (this.questionList[i].answerArray.length != answerCount) {
									this.questionList[i].correct = false
								} else {
									this.questionList[i].correct = true
								}
							}
						} else {
							// console.log("第"+i+"不是多选")
							for (var j = 0; j < this.questionList[i].option.length; j++) {
								if (this.questionList[i].option[j].checked === true) {
									//先查询选择的哪一个，
									// console.log(this.questionList[i].option[j].optionKey)
									//判断答案是否在正确答案中
									if (this.questionList[i].answerArray.indexOf(this.questionList[i].option[j]
											.optionKey) != -1) {
										//不等于-1说明选择对了
										this.questionList[i].correct = true
									} else {
										this.questionList[i].correct = false
									}
								} //结束查看哪一个选项被选择
							} //结束非多选的循环

						} //结束判断题目的类型
						//统计完了该存数据库
						// uni.request({
						//   url:`${this.$baseUrl}/learning/saveProgress/${user.openid}/${this.classId}`,
						//   method:'POST',
						//   data:{
						//     // topicList:this.formData
						//     topicList:this.questionList
						//   },
						//   success: (res) => {
						//     // console.log(res.data)
						//   }
						// })
					} //结束判断题目是否做完
				}
				// 题目做完了，该统计了
				this.formData.submit = true

			},
			//取消收藏

			//视频看完和题目也完成的情况下，可以定义为这个小课程完成，需要改变状态
			async changeClassStatus(id) {
				const user = uni.getStorageSync("user")
				// console.log("类型changeStatus"+this.subjectId)
				//测试将16号的课程学习在缓存中更改为已完成
				uni.request({
					url: `${this.$baseUrl}/learning/changeStatus/${this.classId}/${user.openid}`,
					method: 'PUT',
					success: (res) => {
						// console.log(res)
					}
				})
			},
			async watchDetail() {
				// console.log("查看解析")
				this.formData.topicList = this.questionList

				// const json= JSON.stringify(this.formData)
				// console.log(json)
				uni.navigateTo({
					url: '/pages/topic-detail/topic-detail?item=' + encodeURIComponent(JSON.stringify(this
						.formData)),
				})
			},
			click1(e) {
				console.log('click1', e);
			},
			//重置做题的进度
			async learnAgain() {
				for (var i = 0; i < this.questionList.length; i++) {
					this.questionList[i].checked = false
					for (var j = 0; j < this.questionList[i].option.length; j++) {
						this.questionList[i].option[j].checked = false
					}
				}
				// this.isSubmit=false
				this.formData.submit = false
				this.show = 0

			},
			async goBack() { //返回的地方应该是观看视频的地方
				// this.isSubmit=false
				this.formData.submit = false
				const user = uni.getStorageSync("user")
				// const json=JSON.stringify(this.questionList)
				this.formData.questionList = this.questionList
				if (this.score > 90) {
					this.changeClassStatus()
				}
				uni.navigateBack();
			},
			async getQuestionList(id) {
				// console.log("查询题库" + id)
				const user = uni.getStorageSync("user")
				// console.log(user)
				uni.request({
					url: `${this.$baseUrl}/learning/setTopic/${id}/${user.openid}`,
					method: 'GET',
					success: (res) => {
						// console.log(res.data.data.topicList)
						// console.log(res.data.data.submit)
						this.formData = res.data.data
						this.questionList = this.formData.topicList
								console.log(this.formData)
						// console.log(this.formData)
						// this.isSubmit=res.data.isSubmit
					}
				})
			},
			//提交答案  
			async submitAnswer() {
				this.getTime()
				// console.log("提交答案了")
				for (var i = 0; i < this.questionList.length; i++) {
					if (this.questionList[i].checked === false) {
						return uni.showToast({
							title: '你还有题目未完成',
							icon: 'none',
							mask: true
						})
					} else {
						// console.log(this.questionList[i].answerArray.length)
						if (this.questionList[i].type === 1) {
							// console.log("第"+i+"多选")
							// console.log(this.questionList[i].option.length)
							var answerCount = 0;
							for (var j = 0; j < this.questionList[i].option.length; j++) {
								// console.log(this.questionList[i].option[j].checked)
								if (this.questionList[i].option[j].checked === true) {
									// console.log("第"+i+"多选了"+this.questionList[i].option[j].optionKey)
									answerCount++;
									// console.log(["A","B"].indexOf("A"))
									// console.log(this.questionList[i].answerArray.indexOf(this.questionList[i].option[j].optionKey))
									//判断答案是否在答案集合中
									if (this.questionList[i].answerArray.indexOf(this.questionList[i].option[j]
											.optionKey) == -1) {
										// console.log("选错了")
										this.questionList[i].correct = false
										// 选错了直接退出
										// this.errorNum++;
									}
									//全部选对了就判断数组长度是否正确
								}
								//这里判断答案长度和选择的长度
								// console.log(this.questionList[i].answerArray.length)
								// console.log("答案长度"+answerCount)        
								if (this.questionList[i].answerArray.length != answerCount) {
									this.questionList[i].correct = false
								} else {
									this.questionList[i].correct = true
								}
							}
						} else {
							// console.log("第"+i+"不是多选")
							for (var j = 0; j < this.questionList[i].option.length; j++) {
								if (this.questionList[i].option[j].checked === true) {
									//先查询选择的哪一个，
									// console.log(this.questionList[i].option[j].optionKey)
									//判断答案是否在正确答案中
									if (this.questionList[i].answerArray.indexOf(this.questionList[i].option[j]
											.optionKey) != -1) {
										//不等于-1说明选择对了
										this.questionList[i].correct = true
									} else {
										this.questionList[i].correct = false
									}
								} //结束查看哪一个选项被选择
							} //结束非多选的循环

						} //结束判断题目的类型

					} //结束判断题目是否做完
				}
				// 题目做完了，该统计了
				this.formData.submit = true
				//答题提交统计
				const user = uni.getStorageSync("user")
				// const json=JSON.stringify(this.questionList)
				this.formData.questionList = this.questionList
				// console.log(this.submitScore)
				uni.request({
					url: `${this.$baseUrl}/learning/saveProgress/${user.openid}/${this.classId}`,
					method: 'POST',
					data: {
						// topicList:this.formData
						submitScore: this.submitScore,
						classId: this.formData.classId,
						title: this.formData.title,
						topicList: this.questionList
					},
					success: (res) => {
						// console.log(res.data)
					}
				})
				if (this.score > 90) {
					this.changeClassStatus()
				}

			},

			//提交时间
			async getTime() {
				let date = new Date()
				//年a
				let year = new Date().getFullYear();
				//月份是从0月开始获取的，所以要+1;
				let month = new Date().getMonth() + 1;
				//日
				let day = new Date().getDate();
				this.formData.finishedTime = year + '-' + month + '-' + day;
				// console.log(this.formData.finishedTime)
			},

			//取消收藏
			async cancelCollect() {
				// console.log(this.show)
				this.questionList[this.show].collect = false
			},
			async collectQuestion() {
				// console.log(this.show)
				this.questionList[this.show].collect = true
			},
			async toSpecialQuestion(index) {
				// console.log("去固定的一题",index)
				this.show = index
				this.close()
			},
			open() {
				// console.log('open');
				// this.showAll=true
			},
			close() {
				this.showAll = false
				// console.log('close');
			},
			async watchAllQuestion() {
				// console.log("查看所有题目,当前是第",this.show)
				this.showAll = true
			},
			async preQuestion() {
				if (this.show <= 0) {
					console.log("已经是第一题了")
				} else {
					this.show--
				}
			},
			async nextQuestion() {
				// console.log(this.show)//0
				// console.log(this.questionList.length-1)//3
				if (this.show < this.questionList.length - 1) {
					this.show++
				} else {
					console.log("已经是最后题了")
				}
			},
			async confirmAnswer(index, index2) {
				//处理之前先判断是多选还是单选
				var type = this.questionList[index].type
				switch (type) {
					case 0: {
						// console.log("单选题")
						for (var i = 0; i < this.questionList[index].option.length; i++) {
							this.questionList[index].option[i].checked = false;
						}
						this.questionList[index].option[index2].checked = true;
						this.questionList[index].checked = true;
						break;
					}
					case 1: {
						// console.log("多选题")
						if (this.questionList[index].option[index2].checked) {
							this.questionList[index].option[index2].checked = false;
							for (var i = 0; i < this.questionList[index].option.length; i++) {
								if (this.questionList[index].option[i].checked === true) {
									this.questionList[index].checked = true;
									break;
								} else {
									this.questionList[index].checked = false;
								}
							}
						} else {
							this.questionList[index].option[index2].checked = true;
							this.questionList[index].checked = true;
						}
						// console.log(this.questionList[index].checked)
						break;
					}
					case 2: {
						// console.log("判断题")
						for (var i = 0; i < this.questionList[index].option.length; i++) {
							this.questionList[index].option[i].checked = false;
						}
						this.questionList[index].option[index2].checked = true;
						this.questionList[index].checked = true;
						break;
					}
				}
			},
		},
		computed: {
			scrollerHeight: function() {
				const sysInfo = uni.getSystemInfoSync()
				return (sysInfo.windowHeight - 120) + 'rpx';
			},
			errorNum: function() {
				var num = 0;
				for (var i = 0; i < this.questionList.length; i++) {
					if (!this.questionList[i].correct) {
						num++;
					}
				}
				return num
			},
			correctNum: function() {
				var num = 0;
				for (var i = 0; i < this.questionList.length; i++) {
					if (this.questionList[i].correct) {
						num++;
					}
				}
				return num
			},
			score: function() {
				var correct = 0;
				var error = 0;
				for (var i = 0; i < this.questionList.length; i++) {
					if (this.questionList[i].correct) {
						correct++;
					} else {
						error++;
					}
				}
				var total = correct + error
				var allScore = (correct / total) * 100
				this.submitScore = allScore
				return allScore.toFixed(0);
			}

		},
	}
</script>

<style lang="scss" scoped>
	.after-submit {
		z-index: 999;
		margin-left: 32rpx;
		margin-top: 48rpx;
		width: 686rpx;
		height: 600rpx;
		opacity: 1;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 8rpx 24rpx 0px rgba(23, 42, 99, 0.1);
		position: absolute;

		.result-show-title {
			margin-left: 32rpx;
			margin-top: 32rpx;
			min-width: 538rpx;
			// background-color: #3c9cff;
			height: 52rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 36rpx;
			font-weight: 600;
			letter-spacing: 0px;
			// line-height: 0px;
			color: rgba(51, 51, 51, 1);
			text-align: left;
			vertical-align: top;
		}

		.submit-time {
			margin-top: 8rpx;
			margin-left: 32rpx;
			width: 260rpx;
			height: 34rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			// line-height: 0px;
			color: rgba(153, 153, 153, 1);
			text-align: left;
			vertical-align: top;
		}

		.line {
			margin-top: 32rpx;
			margin-left: 32rpx;
			width: 622rpx;
		}

		.score-box1 {
			display: flex;
			margin-top: 26rpx;
			margin-left: 32rpx;
			opacity: 1;

			.score-title1 {
				width: 84rpx;
				height: 40rpx;
				/** 文本1 */
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 0px;
				// line-height: 0px;
				color: rgba(102, 102, 102, 1);
				text-align: left;
				vertical-align: top;
			}

			.sorce-count {
				display: flex;
				min-width: 180rpx;
				height: 136rpx;
				// margin-top: 32rpx;
				margin-left: 138rpx;

				// background-color: #3c9cff;
				.my-score {
					margin-top: 12rpx;
					margin-left: 12rpx;
					font-size: 90rpx;
					color: #E63434;
				}

				.all-score {
					margin-left: 8rpx;
					margin-top: 72rpx;
				}
			}

		}

		.question-count1 {
			display: flex;
			margin-left: 100rpx;
			margin-top: 25rpx;

			.all-topic {

				// align-items: center;
				.topic-title {
					width: 72rpx;
					height: 34rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0px;
					// line-height: 0px;
					color: rgba(153, 153, 153, 1);
					text-align: left;
					vertical-align: top;
				}

				.topic-count {
					margin-top: 8rpx;
					margin-left: 25rpx;
					text-align: center;
					width: 18rpx;
					height: 40rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 600;
					letter-spacing: 0px;
					color: rgba(51, 51, 51, 1);
					text-align: center;
					vertical-align: top;
				}
			}

			.error-topic {
				// align-items: center;
				margin-left: 136rpx;

				.topic-title {
					width: 72rpx;
					height: 34rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0px;
					// line-height: 0px;
					color: rgba(153, 153, 153, 1);
					text-align: left;
					vertical-align: top;
				}

				.topic-count {
					margin-top: 8rpx;
					margin-left: 25rpx;
					text-align: center;
					width: 18rpx;
					height: 40rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 600;
					letter-spacing: 0px;
					color: rgba(51, 51, 51, 1);
					text-align: center;
					vertical-align: top;
				}
			}

			.right-topic {
				// align-items: center;
				margin-left: 136rpx;

				.topic-title {
					width: 72rpx;
					height: 34rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0px;
					// line-height: 0px;
					color: rgba(153, 153, 153, 1);
					text-align: left;
					vertical-align: top;
				}

				.topic-count {
					margin-top: 8rpx;
					margin-left: 25rpx;
					text-align: center;
					width: 18rpx;
					height: 40rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 600;
					letter-spacing: 0px;
					color: rgba(51, 51, 51, 1);
					text-align: center;
					vertical-align: top;
				}
			}

		}

		.operation {
			display: flex;

			.back {
				width: 302rpx;
				height: 96rpx;
				margin-top: 48rpx;
				margin-left: 32rpx;
				opacity: 1;
				line-height: 96rpx;
				text-align: center;
				border-radius: 8rpx;
				border: 1px solid rgba(55, 123, 250, 1);
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0px;
				color: rgba(55, 123, 250, 1);
				vertical-align: top;


			}

			.topic-detail {
				margin-left: 16rpx;
				margin-top: 48rpx;
				width: 302rpx;
				height: 100rpx;
				opacity: 1;
				border-radius: 8rpx;
				background: rgba(55, 123, 250, 1);
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 96rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				vertical-align: top;
			}
		}
	}

	.tabbar {
		padding-bottom: 25%;
	}

	.score-box-score {
		font-size: 150rpx;
		color: #fa3534;
		margin: 0rpx auto;
	}

	.score-box {
		margin: 10rpx auto;
		width: 80%;
		height: 150rpx;
		line-height: 150rpx;
		text-align: center;
		// background-color: #3c9cff;
		box-shadow: 5px 5px 5px 5px lightgrey;
		padding-bottom: 25%;
	}

	.submit-result {
		height: 20%;

		.answer-count {
			display: flex;
			flex-wrap: wrap;
			// height: 20%
			justify-content: center;
			background-color: #fcbd71;

			view {
				text-align: center;
				margin: 20rpx 30rpx;
				width: 180rpx;
				height: 100rpx;
				line-height: 100rpx;
				// background-color: #fcbd71;
				color: #fa3534;
			}
		}
	}

	.all-question {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;

		.all-question-item {
			// background-color: #3c9cff;
			height: 80rpx;
			width: 80rpx;
			border: 1px solid grey;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 30rpx 30rpx;

			&.finished {
				background-color: greenyellow;
				color: white;
				// border: 5rpx green solid;
			}

			&.active {
				background-color: #3c9cff;
				color: white;
			}
		}
	}

	.question-count {
		display: flex;
		// text-align: center;
		justify-content: center;
		// background-color: #3c9cff;
		position: fixed;
		// bottom: unset;
		bottom: 0rpx;

		.class-count-item {
			// background-color: #3c9cff;
			// border: 1rpx solid grey;
			width: 20%;
			height: 100%;
			font-size: 30rpx;
			color: grey;
			// margin:0 40rpx;
			display: flex;
			justify-content: center;
			line-height: 120rpx;
			// text-align: center;
			// line-height: 120rpx;
		}

		.class-count-item-save {
			// background-color: #3c9cff;
			width: 25%;
			height: 100%;
			font-size: 30rpx;
			// margin:0 40rpx;
			float: right;
			// text-align: right;
			display: flex;
			justify-content: center;
			line-height: 120rpx;
		}
	}

	.switchOrder {
		display: flex;
		justify-content: center;

		.pre {
			width: 25%;
			height: 80rpx;
			background-color: #3c9cff;
			text-align: center;
			line-height: 80rpx;
			color: white;
			margin: 30rpx 40rpx;
			border-radius: 10rpx;
		}

		.submit-answer {
			width: 25%;
			height: 80rpx;
			background-color: #53c21d;
			text-align: center;
			line-height: 80rpx;
			color: white;
			margin: 30rpx 40rpx;
			border-radius: 10rpx;
		}

		.next {
			width: 25%;
			height: 80rpx;
			background-color: #3c9cff;
			text-align: center;
			line-height: 80rpx;
			color: white;
			margin: 30rpx 40rpx;
			border-radius: 10rpx;

		}
	}

	.question-box {
		// background-color: lightgray;
		// text-align: center;
		width: 90%;
		margin: 10rpx auto;

		.question-title {
			min-height: 180rpx;
			// border: 1px solid lightgray;
			width: 100%;
			margin: 20rpx auto;
			// padding: 20rpx;
			letter-spacing: 3px;
			color: grey;
			text-indent: 2rem;
		}

		.question-option-item {
			margin: 30rpx auto;
			min-height: 100rpx;
			border: 1px solid lightgray;
			line-height: 100rpx;
			padding-left: 20rpx;
			color: grey;

			&.active {
				background-color: #3c9cff;
				color: white;
			}

		}

		.question-header {
			height: 80rpx;
			padding: 20rpx;

			.question-order {
				float: right;
			}

			.question-type {
				float: left;
				background-color: lightseagreen;
				color: white;
				height: 50rpx;
				width: 20%;
				font-size: 30rpx;
				line-height: 50rpx;
				text-align: center;
				// margin-top: 20rpx;
			}
		}

		// box-shadow: lightgray -5rpx -5rpx 0 0;
		// height: 100%;
		// .question-box{
		//   margin: 20rpx auto;
		//   height: 120rpx;
		//   width: 90%;
		//   // width: 90rpx
		// }
		// .question-header{
		// }
	}

	.question-count {
		position: absolute;
		width: 100%;
		// border: 1px solid grey;
		box-shadow: lightgray -5rpx -5rpx 0 0;
		// background-color: lightseagreen;

		// color: white;
		height: 120rpx;
		bottom: 0px;
	}
</style>
